<template>
  <div>
    <Topbar ref="topBar" :tabName="tabName" :backValue="backValue">
      <template #operate>
        <el-button :loading="loading" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="save">保存</el-button>
      </template>
    </Topbar>
    <div class="myFormBox" v-loading="loading">
      <el-form :model="form" ref="formRef" label-width="100px">
        <el-form-item label="模版名称" prop="templateName" :rules="getRules('input', '模版名称')">
          <el-input style="width: 260px;" placeholder="请输入" v-model="form.templateName" show-word-limit
            :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="计价方式" prop="pricingMethod" :rules="getRules('input', '计价方式')">
          <div>
            <el-radio-group v-model="form.pricingMethod">
              <el-radio :label="1">
                <span style="color:#000">按件计费</span>
              </el-radio>
              <el-radio :label="2">
                <span style="color:#000">按重量计费</span>
              </el-radio>
            </el-radio-group>
            <div class="tips">模板创建后计费规则不可修改</div>
          </div>
        </el-form-item>
        <el-form-item label="计费规则" prop="pricingRule" :rules="getRules('input', '模版名称')">
          <div style="width: 100%;">
            <div class="flex align-items-center">
              <span class="mr8" style="color: #000;font-weight: 600;">默认运费</span>
              <span class="tips" style="line-height: normal;">除指定区域外，其余地区的运费采用【默认运费】</span>
            </div>
            <div class="flex align-items-center mt8 mb16 color-222">
              <el-form-item prop="pricingRule.inPiece" :rules="getRules('input', '')">
                <el-input style="width: 120px;" placeholder="请输入" v-model="form.pricingRule.inPiece"
                 @input="()=>{form.pricingRule.inPiece=limitInt(form.pricingRule.inPiece)}"></el-input>
              </el-form-item>
              <span class="ml8 mr8">{{unit}}内</span>
              <el-form-item prop="pricingRule.inPrice" :rules="getRules('input', '')">
                <el-input style="width: 120px;" placeholder="请输入" v-model="form.pricingRule.inPrice"
                 @input="()=>{form.pricingRule.inPrice=limitFloat(form.pricingRule.inPrice)}"></el-input>
              </el-form-item>
              <span class="ml8 mr8">元，每增加</span>
              <el-form-item prop="pricingRule.addPiece" :rules="getRules('input', '')">
                <el-input style="width: 120px;" placeholder="请输入" v-model="form.pricingRule.addPiece"
                 @input="()=>{form.pricingRule.addPiece=limitInt(form.pricingRule.addPiece)}"></el-input>
              </el-form-item>
              <span class="ml8 mr8">{{unit}}，运费增加</span>
              <el-form-item prop="pricingRule.addPrice" :rules="getRules('input', '')">
                <el-input style="width: 120px;" placeholder="请输入" v-model="form.pricingRule.addPrice"
                 @input="()=>{form.pricingRule.addPrice=limitFloat(form.pricingRule.addPrice)}"></el-input>
              </el-form-item>
              <span class="ml8 mr8">元</span>
            </div>
            <el-table class="mb16" :header-cell-style="{ background: '#ddd' }" v-show="designatedArea.length" stripe
              :data="designatedArea" max-height="300" style="width: 100%;">
              <el-table-column min-width="440" prop="destination" label="目的地"></el-table-column>
              <el-table-column min-width="116" :label="`首件数（${unit}）`" prop="firstPieces"></el-table-column>
              <el-table-column min-width="102" label="首费（元）" prop="firsCharge"></el-table-column>
              <el-table-column min-width="116" :label="`续件数（${unit}）`" prop="continuations"></el-table-column>
              <el-table-column min-width="102" label="续费（元）" prop="renew"></el-table-column>
              <el-table-column label="操作" min-width="160">
                <template v-slot="{ row, $index }">
                  <el-button type="success" plain @click="editDesignatedArea(row)">编辑</el-button>
                  <el-button type="danger" plain @click="delDesignatedArea(row, $index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button @click="openDesignatedAreaDialog" type="primary" round>
              <img style="width: 14px;height: 14px;margin-right: 5px;" :src="btnAdd" alt="">
              为指定地区增加运费设置
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="不配送区域" prop="isUndistributedArea">
          <div style="width: 100%;">
            <div class="flex align-items-center">
              <el-switch v-model="form.isUndistributedArea"></el-switch>
              <span v-show="form.isUndistributedArea" class="textBtn" @click="selectNoArea">{{ isEdit ? '修改' : '选择' }}</span>
            </div>
            <div v-show="form.isUndistributedArea">
              <div>{{ panelAreaNameList }}</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <FreightSettingDialog :unit="unit" />
    <CascaderPanelAreaDialog />
  </div>
</template>

<script setup>
import { useFreightData } from '../Hooks/index';
import { useFreightAction,usePanelAreaDialog } from '../Hooks/freightAction';
import { useImportImg } from '@/hooks/index'
import getRules from '@/validUtils';
import CascaderPanelAreaDialog from './CascaderPanelAreaDialog.vue'
import FreightSettingDialog from './FreightSettingDialog.vue'
import { limitFloat,limitInt } from '@/utils/common.js'
const btnAdd = useImportImg('btn-add')
const route = useRoute();
const isEdit = computed(() => route.query.uuid ? true : false)
const tabName = computed(() => isEdit.value ? '编辑运费模板' : '新增运费模板')
const topBar = ref(null);
const backValue = 'LogisticsToolsIndex'
const { seachTable } = useFreightData()
const loading = ref(false)

const formRef = ref(null)
const form = ref({
  templateName: '',
  pricingMethod: 1,
  pricingRule: {
    inPiece: null,
    inPrice: null,
    addPiece: null,
    addPrice: null,
  },
  designatedArea: [],
  isUndistributedArea: false,
  undistributedArea: [],
})
const unit = computed(() => {
  return form.value.pricingMethod === 1 ? '件' : 'kg'
})
const {
    designatedArea,
    itemDesignatedArea,
    designatedAreDialogShow} = useFreightAction()
const openDesignatedAreaDialog = () => {
  designatedAreDialogShow.value = true
}
const editDesignatedArea = (row) => {
  itemDesignatedArea.value = {
    ...row
  }
  openDesignatedAreaDialog()
}
const delDesignatedArea = (row, index) => {
  designatedArea.value.splice(index, 1)
}
const {panelAreaDialogShow,panelArea,panelAreaNameList} = usePanelAreaDialog()
const selectNoArea = () => {
  console.log('选择不配送区域')
  panelAreaDialogShow.value = true
}
const cancel = () => {
  topBar.value.backHandle();
};
const save = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log(form.value)
      if (isEdit.value) {
        seachTable.value.handlerSearch()
      }else{
        seachTable.value.initSearch()
      }
    }
  })
}
</script>

<style lang="less" scoped>
.myFormBox {
  padding: 24px;
  .textBtn{
    color: #3480ff;
    font-size: 14px;
    cursor: pointer;
    margin-left: 15px;
  }
}
</style>